<template>

  <div class="container" id="walletInfo">
    <div class="header flex-derc-warp">
      <div class="return" @click="$router.back()"
           style="position: absolute;top:.5rem;left:1rem;width: 1.6rem;height: 1.6rem">
        <img src="static/img/return.png" width="100%" height="100%"/>
      </div>


      <div style="width: 100%;height: 1.5rem;text-align: center;font-size:1.3rem;margin-top: .4rem">ETH钱包</div>

      <div class="headImg flex-derc-warp flex-center-center">
        <div class="imgTou flex-derc-warp flex-center-center">
          <div style="width: 100%;text-align: center;font-size: 1.2rem;color:#435368;margin:.5rem;">{{account.name}}</div>
          <img :src="account.img"  alt=""></div>
        <div  class="yanzhengma flex-derc-warp flex-center-center"><span
          style="width: 100%;text-overflow :ellipsis;overflow: hidden;color:#445568;text-align: center;font-size: 1rem">{{(account.ethBalance/Math.pow(10,18)).toFixed(6)}} Ether</span></div>

        <div  class="yanzhengma flex-derc-warp flex-center-center"><span
          style="width: 70%;text-overflow :ellipsis;overflow: hidden;color:#818285;text-align: center;font-size: .85rem">{{account.address}}</span></div>
      </div>
      <div style="width: 100%;height: 6rem;padding: .5rem 1rem 1rem 1rem;background: #fff">
        <mt-field label="钱包名:"  v-model="account.name" style=" border-bottom: 0.5px solid rgba(0,0,0,0.5);margin-bottom: .5rem"></mt-field>
        <mt-field label="密码提示:" disabled  :value="account.hint?account.hint:'无'" style=" border-bottom: 0.5px solid rgba(0,0,0,0.5);margin-bottom: .5rem"></mt-field>

        <!--<div style="font-size:1rem;color:#62696f;height: 2.2rem">钱包名</div>-->
        <!--<div style="font-size:1rem;color:#62696f;height: 2.2rem;margin-bottom:.5rem;border-bottom:0.5px solid rgba(0,0,0,0.1)">{{currentAccount.name}}</div>-->
        <mt-button style=" width: 16rem;margin:1rem auto .8rem auto;display: block;background: #48adea;color:#fff" @click="$router.push({name:'EthUpdatePwd'})">
          <!--<img src="static/img/to.png" style="position: absolute;right: 0.2rem;top:.7rem" height="20" width="20" slot="icon">-->
          修改密码
        </mt-button>
        <mt-button style="width: 16rem;margin:0rem auto .8rem auto;display: block;background: #48adea;color:#fff" @click="expt('pk')">
          <!--<img src="static/img/to.png"  style="position: absolute;right: 0.2rem;top:.7rem" height="20" width="20" slot="icon">-->
          导出私钥
        </mt-button>
        <mt-button style="width:16rem;margin:0rem auto .8rem auto;display: block;background: #48adea;color:#fff" @click="expt('store')">
        <!--<img src="static/img/to.png" style="position: absolute;right: 0.2rem;top:.7rem" height="20" width="20" slot="icon">-->
          导出keystore
        </mt-button>

        <mt-button @click="expt('mnemonic')" style="width:16rem;margin:0rem auto .8rem auto;display: block;background: #48adea;color:#fff" type="primary" v-if="account.mnemonic" >
          导出助记词
        </mt-button>

      </div>

    </div>

    <mt-popup
      v-model="pwdVisible"
      style="width: 100%;padding: 0rem 0rem 0rem 0rem" position="bottom">
     <div style="padding: 1rem">

       <mt-field  placeholder="请输入密码" style="text-align: center" type="password" v-model="pwd"></mt-field>
       <mt-button type="primary" style="width: 50%;margin:1rem auto;display: block" @click="exportWallet">
         确认导出
       </mt-button>
     </div>
    </mt-popup>

    <mt-popup
      v-model="delVisible" popup-transition="popup-fade"
      style="width: 100%;padding: 0rem 0rem 0rem 0rem" position="bottom">
      <div style="padding: 1rem">

        <div style="padding-bottom: .7rem;font-weight: 600; text-align: center;border-bottom: 1px solid rgba(0,0,0,0.1)">此操作无法恢复,请慎重!</div>
        <mt-field  placeholder="请输入密码" style="text-align: center" type="password" v-model="pwd"></mt-field>
        <mt-button type="danger" style="width: 50%;margin:1rem auto;display: block" @click="deleteWallet">
          确定删除
        </mt-button>
      </div>
    </mt-popup>

    <mt-popup
      v-model="exportPkVisible" popup-transition="popup-fade"
      style="width: 75%;padding:1rem;border-radius:.3rem;">

      <div style="position: absolute;right:1rem;top:.5rem;font-size: 1.7rem;color:gray" @click="exportPkVisible=false">×</div>
      <h3 style="text-align: center;margin:0rem 0rem 1rem 0rem">导出私钥</h3>
      <div style="border-radius: .3rem;border:.5px #ff7500 solid;font-size: .9rem;padding: .5rem;margin-bottom:.8rem;background: #FBF0EE">
        安全警告:私钥未经加密,导出存在风险,建议使用助记词和 KeyStore 进行备份。
      </div>

      <!--<mt-field  type="textarea" disabled id="priKey" style="border:1px solid rgba(0,0,0,0.1);border-radius:.3rem;font-size: .9rem;"  v-model="account.priKey"></mt-field>-->

      <div id="priKey" style=" border: 1px solid rgba(0, 0, 0, 0.1);color:#2a2a2a; border-radius: 0.3rem; font-size: 0.85rem; text-align: left; padding: .3rem; white-space: normal; word-break: break-all; word-wrap: break-word" >
        {{account.priKey}}
      </div>

       <mt-button type="primary" data-clipboard-target="#priKey" id="copypk" style="width: 100%;margin:1rem auto;display: block;background: #36BAC9" @click="copyPk">
          复制
        </mt-button>
    </mt-popup>

    <mt-popup
      v-model="exportKeyStoreVisible" popup-transition="popup-fade"
      style="width: 85%;padding:0rem 1rem 1rem 1rem;border-radius:.3rem;">

      <div @click="exportKeyStoreVisible=false" style="position: absolute;top:.1rem;right:.8rem;font-size: 1.6rem;color:gray">×</div>
      <h3 style="text-align: center;margin:.5rem 0rem .5rem 0rem;padding-bottom: .4rem;">导出Keystore</h3>

<div style="font-size: .75rem;color:#0C60A1;font-weight: 600;margin-bottom:.3rem">离线保存</div>
      <div style="font-size: .75rem;margin-bottom:.5rem;line-height: 1.1rem">请复制黏贴 Keystore 文件到安全、离线的地方保存。切勿保存至邮箱、记事本、网盘、聊天工具等,非常危险</div>

      <div style="font-size: .75rem;color:#0C60A1;font-weight: 600;margin-bottom:.2rem">请勿使用网络传输</div>
      <div style="font-size: .75rem;margin-bottom:.5rem;line-height: 1.1rem">请勿使用网络工具传输 Keystore 文件,一旦黑客获取将造成不可挽回的资产损失。建议离线设备通过扫二维码方式传输</div>

      <div style="font-size: .75rem;color:#0C60A1;font-weight: 600;margin-bottom:.2rem">密码保险箱保存</div>
      <div style="font-size: .75rem;margin-bottom:.5rem;line-height: 1.1rem">如需在线保存,则建议使用安全等级更高的 1Password 等密码保管软件保存 Keystore</div>



      <div id="store" style=" border: 1px solid rgba(0, 0, 0, 0.1);color:#666666; border-radius: 0.3rem; font-size: 0.75rem; text-align: left; padding: .3rem; white-space: normal; word-break: break-all; word-wrap: break-word" >
        {{keyStore}}
      </div>

      <div style="width:9rem;height: 9rem;margin:.3rem auto .3rem auto">

        <canvas id="qrCode" ref="qrCode" style="width: 100%;height: 100%"></canvas>
      </div>

      <mt-button type="primary" id="copystore" data-clipboard-target="#store" style="width: 100%;margin:0rem auto;display: block;background: #36BAC9" @click="copyKeyStore">
        复制Keystore
      </mt-button>
    </mt-popup>

    <mt-popup
      v-model="exportMnemonicVisible" popup-transition="popup-fade"
      style="width: 75%;padding:1rem;border-radius:.3rem;">

      <div style="position: absolute;right:1rem;top:.5rem;font-size: 1.7rem;color:gray" @click="exportMnemonicVisible=false">×</div>
      <h3 style="text-align: center;margin:0rem 0rem 1rem 0rem">备份助记词</h3>
      <div style="border-radius: .3rem;border:.5px #ff7500 solid;font-size: .9rem;padding: .5rem;margin-bottom:.8rem;background: #FBF0EE">
        安全警告: 助记词与私钥具有同等重要性,丢失助记词同样会造成财产丢失,请妥善保管在只有你知道的地方,勿泄露给他人。
      </div>


      <div id="mnemonic" style=" border: 1px solid rgba(0, 0, 0, 0.1);color:#313131; border-radius: 0.3rem; font-size: 0.85rem; text-align: left; padding: .3rem; white-space: normal; word-break: break-all; word-wrap: break-word" >
        {{account.mnemonic}}
      </div>

      <mt-button type="primary" data-clipboard-target="#mnemonic" id="copymnemonic" style="width: 100%;margin:1rem auto;display: block;background: #36BAC9" @click="copyMemonic">
        复制
      </mt-button>
    </mt-popup>

    <div style="position: fixed;width: 100%;bottom:0.5rem;text-align: center">


      <mt-button style="width: 16rem;display: block;margin: 0px auto .6rem auto" type="danger" @click="delVisible=!delVisible">
        删除钱包
      </mt-button>
    </div>

    <!--<foot></foot>-->

  </div>

</template>

<script>
  import accountUtils from "../../../service/eth/accountUtils.js";
  import {mapGetters, mapActions} from 'vuex'

  import Clipboard from 'clipboard'
  import {Toast,Dialog} from 'vant'
  import {Popup,Button} from 'mint-ui'

  export default {
    components: {

      Popup
    },
    data() {
      return {
        account:{},
        active:'tab1',
        pwd:'',
        pwdVisible:false,
        exportMnemonicVisible:false,
        exportPkVisible:false,
        exportKeyStoreVisible:false,
        popupVisible: false,
        delVisible:false,
        keyStore:'',
        type:''
      }
    },
created(){
  this.account=this.$route.params.index>-1?this.wallet[this.$route.params.index]:this.currentAccount
},
    computed: {
      ...mapGetters(['wallet','accountIndex','coinsList','currentAccount'])
    },
    methods: {
      ...mapActions(['setWallet','setAccountIndex','setCoinByIndex','setEthBalance','setEthPrice','setBalance','setWalletAccountByIndex']),
      expt(type){
        this.pwdVisible=!this.pwdVisible;
        this.type=type
      },
      deleteWallet(){
        let _this=this;
        if(this.pwd==''){
          this.delVisible=false
          Dialog.alert({
            title: '提示',
            message: '请输入密码'
          }).then(() => {
            // on close
          });

          return;
        }
        else if(this.pwd!=this.account.password){
          this.delVisible=false
          Dialog.alert({
            title: '提示',
            message: '密码错误'
          }).then(() => {
            // on close
          });

          return;
        }else{

          Toast.loading({
            duration: 0,
            forbidClick: true,
            message: 'loading...'
          });

          setTimeout(()=>{
            Array.prototype.del = function(dx)
            {
              if(isNaN(dx)||dx>this.length){return false;}
              this.splice(dx,1);
            }
            _this.wallet.del(_this.accountIndex);

            if(_this.wallet.length>0){
              _this.setAccountIndex(_this.wallet.length-1);
              _this.setWallet(_this.wallet)
            }else{
              _this.setAccountIndex(-1);
              _this.setWallet([])
            }

            setTimeout(()=>{
              Toast.clear()
              _this.$router.push({name:'Index'})
            },300)

          },200)

        }
      },
      exportWallet(){
        let _this=this;
        if(this.pwd==''){
          this.pwdVisible=false
          Dialog.alert({
            title: '提示',
            message: '请输入密码'
          }).then(() => {
            // on close
          });
          return;
        }
        else if(this.pwd!=this.account.password){
          this.pwdVisible=false
          Dialog.alert({
            title: '提示',
            message: '密码错误'
          }).then(() => {
            // on close
          });
          return;
        }else{

          if(this.type=='pk'){
            this.exportPkVisible=!this.exportPkVisible
            this.pwdVisible=!this.pwdVisible
          }else if(this.type=='store'){
            this.pwdVisible = !this.pwdVisible

            setTimeout(()=>{
              Toast.loading({
                duration: 0,
                forbidClick: true,
                message: '正在导出...'
              });

              setTimeout(()=>{
                let keystore= accountUtils.generateKeyStore(this.account.priKey,this.account.password);
                _this.keyStore = keystore
                accountUtils.generatePublicKeyQrCode('qrCode', keystore);
                this.$refs.qrCode.style.width = '100%'
                this.$refs.qrCode.style.height = '100%'
                Toast.clear()
                this.exportKeyStoreVisible = !this.exportKeyStoreVisible

              },100)
            },300)
          }else if(this.type=='mnemonic'){
            this.pwdVisible = !this.pwdVisible
            this.exportMnemonicVisible=!this.exportMnemonicVisible
          }
this.pwd=''
        }
      },
      copyPk(){
        this.pwd='';
        this.exportPkVisible=false
        new Clipboard('#copypk', {
          text: function(trigger) {
            Dialog.alert({
              title: '提示',
              message: '已复制私钥到剪切板'
            }).then(() => {
              // on close
            });
            return trigger.getAttribute('href'); // 返回需要复制的内容
          }
        });
      },
      copyKeyStore(){
        this.pwd='';
        this.exportKeyStoreVisible=false
        new Clipboard('#copystore', {
          text: function(trigger) {
            Dialog.alert({
              title: '提示',
              message: '已复制KeyStore到剪切板'
            }).then(() => {
              // on close
            });

            return trigger.getAttribute('href'); // 返回需要复制的内容
          }
        });
      },
      copyMemonic(){
        this.pwd='';
        this.exportMnemonicVisible=false
        new Clipboard('#copymnemonic', {
          text: function(trigger) {

            Dialog.alert({
              title: '提示',
              message: '已复制助记词到剪切板'
            }).then(() => {
              // on close
            });
            return trigger.getAttribute('href'); // 返回需要复制的内容
          }
        });
      }
    },
    async mounted() {


    }
  }
</script>
<style scoped>
  @import url("../../../assets/css/walletInfo.css");
</style>

